<template>
    <div class="main">
        <el-container>
            <!--侧导航-->
            <el-aside width="200px">
                <el-menu :default-openeds="['1']" :unique-opened="true" :background-color="'#B3C0D1'">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>导航一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                        <el-menu-item index="1-3">选项3</el-menu-item>
                        <el-menu-item index="1-4">选项4</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                        <el-menu-item index="2-4">选项4</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                        <el-menu-item index="3-3">选项3</el-menu-item>
                        <el-menu-item index="3-4">选项4</el-menu-item>
                        <el-menu-item index="3-5">选项5</el-menu-item>
                        <el-menu-item index="3-6">选项6</el-menu-item>
                        <el-menu-item index="3-7">选项7</el-menu-item>
                        <el-menu-item index="3-8">选项8</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <!--头部-->
                <el-header>Header</el-header>
                <!--内容-->
                <el-main>
                    <template>
                        <!--选项卡-->
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="基金统计" name="first"></el-tab-pane>
                            <el-tab-pane label="提现统计" name="second"></el-tab-pane>
                            <el-tab-pane label="角色管理" name="third"></el-tab-pane>
                        </el-tabs>
                        <!--页面内容-->

                    </template>
                </el-main>
                <!--尾部-->
                <!--<el-footer>版权所有@ 2018</el-footer>-->
            </el-container>
        </el-container>
    </div>
</template>

<script>
//    import FundsStatistic from './FundsStatistic.vue'
    export default {
        components: {
//            FundsStatistic
        },
        data() {
            return {

            }
        }
    };
</script>
<style lang="scss">
    .main{
        height:100%;
    }
    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        /*background-color: #E9EEF3;*/
        /*text-align: center;*/
    }
    .el-container{
        height:100%;
    }
</style>
